<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        div {
            position: absolute;
            left: 200px;
            top: 1500px;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id='demo' style='opacity: 0.3;'></div>
    <button id='btn'>close</button>
    <iframe src="./child.html" width='400' height='400' frameborder="1"></iframe>
    <script src="./toolForInformation.js"></script>
    <script>
        // window.parent  window.top  window.self  返回的是window对象
        // var a = 10;






        // window.name   默认为空串""
        // 可读可写，为窗口及浏览器的标签页起的名字，即使该标签页跳转到百度，name仍然不变
        // 给 name 赋值为不是字符串类型的值，name的值还是字符串，会隐式转换成字符串





        // window
        // offsetTop     window.pageYOffset    window.innerHeight
        // function check (_id) {
        //     var oDiv = document.getElementById(_id);
        //     if (oDiv.offsetTop <= window.pageYOffset + window.innerHeight) {
        //         oDiv.timer = setInterval(function () {
        //             if (oDiv.style.opacity == '1') {
        //                 clearInterval(oDiv.timer);
        //             }else {
        //                 oDiv.style.opacity = parseFloat(oDiv.style.opacity) + 0.01;
        //             }
        //         }, 60);
        //     }　
        // }
        // window.onscroll = function () {
        //     check('demo');
        // }




        // 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。 IE、 Safari、 Chrome 和 Opera 支持 screenLeft 和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY。
        // screenLeft screenTop screenX screenY 用的比较少
        // window.screenX || window.screenLeft  // 兼容性写法






        // window.confirm('你到底爱不爱我！');
        // 显示带有一段消息以及确认按钮和取消按钮的对话框。确定返回true，取消返回false

        // window.prompt('你到底爱不爱我！');
        // 显示可提示用户输入的对话框。 返回用户输入的信息的字符串,点击取消按钮返回null

        // window.onbeforeunload = function() {return 'hahaha';}
        // 退出时弹窗，ie10,11 可以看到返回信息（进行操作后才会弹出弹窗）

        // var newWindow = window.open('https://www.baidu.com', 'duyi');
        // var newWindow = window.open('https://www.baidu.com', 'duyi', 'width=200, height=200');
        // 打开一个新的浏览器窗口或（查找一个已命名的窗口）。
        // 第二个参数设置的是window.name
        // 第三个参数还有好多特征可以设置，参考文档
        // 特征值不写的话，会在右侧打开一个新窗口

        // 可通过moveTo moveBy 移动窗口   resizeTo resizeBy 调整窗口大小
        // moveTo moveBy 在新打开的窗口里使用window.moveTo 或者 moveBy 可以移动窗口到指定位置
        // resizeBy resizeTo 设置新打开窗口的大小
        // 返回值newWindow 是新打开的窗口的window对象
        // console.log(newWindow);
        // var btn = document.getElementById('btn');
        // btn.onclick = function () {
        //     // console.log(newWindow.name);// 不能操作
        //     newWindow.close();  // 可以关打开的页面, 但是自己关闭自己不可以
        // }


        
        // // navigator
        // console.log(navigator.platform);//返回运行浏览器的操作系统平台,不准。
        // console.log(navigator.userAgent); //返回浏览器的平台和版本信息。
        // console.log(navigator.appVersion);//返回浏览器的平台和版本信息。
        // // plugins 是插件的意思
        // console.log(navigator.cookieEnabled); //返回指明浏览器中是否启用cookie的布尔值。
        // console.log(navigator.onLine);// 返回指明系统是否处于脱机模式(是否连网)的布尔值。
        // // 做离线应用的时候可以判断，没网使用缓存，有网加载最新的




        // history
        // console.log(history.length); // 同一个窗口的历史记录的长度
        // history.back();
        // history.forward();
        // history.go(1); //从当前页面开始数 正数往前数，负数往后退，数值太大或太小返回undefined




        // screen 
        // width, height,availHeight,availWidth
        // 一般都不使用，也就上面这四个没有兼容性问题，但是也没用










        // 每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符）。
        // url：每个资源独一无二的地址
        // https://www.baidu.com:443/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=nba&rsv_pq=b07bc8ac00008677&rsv_t=6332vNWuKAWk0z%2Be3i0Us%2Fy57isnFUgi5BkSHV66DDbmlHqv%2B4z3clPFJwY&rqlang=cn&rsv_enter=1&rsv_sug3=3&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&inputT=448&rsv_sug4=448#dasdas

        // 协议
        // https://

        // //域名 和 端口号，https默认443，可以省略
        // www.baidu.com:443

        // //路径
        // /s 

        // //参数
        // ?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=nba&rsv_pq=b07bc8ac00008677&rsv_t=6332vNWuKAWk0z%2Be3i0Us%2Fy57isnFUgi5BkSHV66DDbmlHqv%2B4z3clPFJwY&rqlang=cn&rsv_enter=1&rsv_sug3=3&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&inputT=448&rsv_sug4=448

        // //锚点
        // #dasdas ，改锚点页面是不会刷新的，
        // 可以用于单页面应用（Single Page Web Application,SPA）：点击切换内容，但不像传统的页面那样跳转，或者刷新页面
        // 锚点不一样也算一个全新的url，刷新页面仍然是新的地址




        // location 
        // 具体看pdf文档, 随便找个页面试试
        // 可读可写, 通过赋值改变对应的 url
        // location.href
        // location.protocol
        // location.hostname
        // location.host
        // location.port   省略后location.port为空串""
        // location.pathname
        // location.search
        // location.hash
        
        // location.assign('https://www.baidu.com'); 在当前窗口加载新的文档。
        // location.reload(false); // 使用缓存的重新刷新
        // location.reload(true);// 重新去服务器加载
        // location.replace(url); // 用新的文档替换当前文档。没有历史记录

        // 1.assign
        // 2.reload
        // 如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
        // 如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
        // 3.replace
        // window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
        // window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，所以是没有后退返回上一页的
        
        
    </script>
</body>
</html>